<template>
    <div class="upload-cover" @click="showCoverSelect">
        <div class="cover-wrap">
            <!-- <img class="cover-image" ref="cover-image" :src="coverImage"> -->
            <img class="cover-image" ref="cover-image" :src="value">
        </div>
        <el-dialog title="选择封面" :visible.sync="dialogVisible" append-to-body>
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane label="素材库" name="first">
                    <!-- ref 有两个作用
                     1、作用到普通 HTML 标签上可以获取 DOM 
                     2、作用到组件上可以获取组件 -->
                    <!-- 图片列表 -->
                    <image-list :is-show-add="false" :is-show-action="false" ref="image-list" is-show-selected/>
                    <!-- /图片列表 -->
                </el-tab-pane>
                <el-tab-pane label="上传图片" name="second">
                    <input type="file" ref="file" @change="onFileChange">
                    <img ref="preview-image" width="100">
                </el-tab-pane>
            </el-tabs>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onCoverConfirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { uploadImage } from "@/api/image";
import ImageList from '../../image/components/image-list'
export default {
       components:{
  
    ImageList
    },
    props: ["value"], //简写
    // props:["cover-image"],
    data() {
        return {
            dialogVisible: false,
            activeName: "second",
        };
    },
    methods: {
        showCoverSelect() {
            this.dialogVisible = true;
        },
        onFileChange() {
            // 获取文件对象
            const file = this.$refs.file.files[0];
            console.log(file);
            // 图片预览
            const blob = window.URL.createObjectURL(file);
            this.$refs["preview-image"].src = blob;
        },
        onCoverConfirm() {
            // 如果 tab 是上传图片， 并且 input-file有选择的文件
            // 才执行上传图片的操作
            if (this.activeName === "second") {
                const file = this.$refs.file.files[0];
                if (!file) {
                    this.$message("请选择文件");
                    return;
                }
                // 执行上传文件的操作
                const fd = new FormData();
                fd.append("image", file);
                uploadImage(fd).then((res) => {
                    console.log(res);
                    // 关闭弹出层
                    this.dialogVisible = false;
                    // 展示上传的图片
                    this.$refs["cover-image"].src = res.data.data.url;
                    // 将图片地址发送给父组件
                    //  this.$emit('update-cover',res.data.data.url)

                    this.$emit("input", res.data.data.url);
                });
            } else if(this.activeName === 'first'){
                // 还有一种组件通信的方法： 父组件直接可以访问子组件中的数据
                const imageList = this.$refs['image-list']
                console.log(imageList)
                const selected = imageList.selected
                if(selected === null){
                    this.$message('请选择封面图片')
                    return
                }
                // 关闭对话框
                  this.dialogVisible = false;
                // 修改父组件
                  this.$emit("input", imageList.images[selected].url);

            }
        },
    },
};
</script>

<style scoped>
.cover-wrap {
    width: 180px;
    height: 150px;
    border: 1px solid #000;
}
.cover-wrap .cover-image {
    height: 150px;
    min-width: 100%;
}
</style>